<template>
  <ul>
    <li>序号-- 名字</li>
    <li v-for="(item,index) in list" :key="item.id" >
        {{index + 1}} -- {{item.name}}
        <!-- 提供一个插槽，为使用者提供便利，让使用更灵活 -->
        <slot :id="item.id"></slot>
    </li>
  </ul>
</template>

<script>
export default {
    props: {
        list: Array
    }
}
</script>

<style scoped>
ul li {
    list-style: none;
}
li {
    line-height: 30px;
    padding: 5px 10px;
}
li:nth-child(2n) {
    background-color: pink;
}
button {
    float: right;
}
</style>